<template>
    <div>
      <a-comment id="comment-area">
        <a-avatar slot="avatar" :src="userInfo.avatar" alt="Han Solo" />
        <div slot="content">
          <a-form-item>
            <a-textarea id="my-textarea" :rows="4" v-model="content" />
          </a-form-item>
          <a-form-item>
            <a-button
              html-type="submit"
              :loading="submitting"
              type="primary"
              @click="handleSubmit"
            >添加留言</a-button>
          </a-form-item>
        </div>
      </a-comment>
    </div>
  </template>
  <script>
  import { addArticleComment } from "@/api/request";
  import { getCurrentTime } from "@/assets/js/getTime";
  export default {
    data() {
      return {
        content: "",
        submitting: false,
        userInfo:{}
      };
    },
    mounted(){
      this.userInfo=JSON.parse(localStorage.getItem("userInfo"))
    },
    props: {
      parentMsgId: "",
      replyMsgUsername: "",
      parentAvatar:"",
      articleId:""
    },
    watch: {
      replyMsgUsername() {
        document
          .querySelector("#my-textarea")
          .setAttribute("placeholder", "回复: " + "@" + this.replyMsgUsername);
      }
    },
    methods: {
      handleSubmit() {
        if (!this.content) {
          return;
        }
        this.submitting = true;
        // console.log(userInfo,userInfo.userId,userInfo.name,'zzz')
        let obj={
          "content":this.content,
          "userId":this.userInfo.userId,
          "userName":this.userInfo.name,
          "userAvatar":this.userInfo.avatar,
          "parentId":this.parentMsgId || -1,
          "parentName":this.replyMsgUsername || "无",
          "parentAvatar":this.parentAvatar || "无",
          "articleId":this.articleId,
          "time":getCurrentTime()
        }
        console.log(obj,'obj')
        addArticleComment(obj).then(res => {
          console.log('res',res)
          this.submitting = false;
          this.content = "";
          this.$message.success('添加成功！')
          document
          .querySelector("#my-textarea")
          .setAttribute("placeholder", '');
          this.$emit('reload')
        }).catch(err => {
          console.log(err);
          
        })
      },
      handleChange(e) {
        this.value = e.target.value;
      }
    }
  };
  </script>
  
  